:root {
  --brand-color: #509EE3;
  --brand-light-color: #CDE3F8;
  --brand-saturated-color: #2D86D4;

  --base-grey: #f8f8f8;
  --grey-1: color(var(--base-grey) shade(10%));
  --grey-2: color(var(--base-grey) shade(20%));
  --grey-3: color(var(--base-grey) shade(30%));
  --grey-4: color(var(--base-grey) shade(40%));
  --grey-5: color(var(--base-grey) shade(50%));

  --grey-text-color: #797979;
  --alt-color: #F5F7F9;
  --alt-bg-color: #F4F6F8;

  --success-color: #9CC177;
  --headsup-color: #F5A623;
  --warning-color: #E35050;

  --gold-color: #F9D45C;
  --orange-color: #F9A354;
  --purple-color: #A989C5;
  --purple-light-color: #C5ABDB;
  --green-color: #9CC177;
  --dark-color: #4C545B;
  --error-color: #EF8C8C;
  --slate-color: #9BA5B1;
  --slate-light-color: #DFE8EA;
  --slate-extra-light-color: #F9FBFC;
}

.text-default, :local(.text-default) {
    color: var(--default-font-color);
}

.text-default-hover:hover {
    color: var(--default-font-color);
}

.text-danger { color: #EEA5A5; }

/* brand */
.text-brand, :local(.text-brand),
.text-brand-hover:hover, :local(.text-brand-hover):hover {
    color: var(--brand-color);
}

.text-brand-saturated,
.text-brand-saturated-hover:hover {
    color: var(--brand-saturated-color);
}

.text-brand-darken,
.text-brand-darken-hover:hover {
    color: color(var(--brand-color) shade(20%));
}

.text-brand-light, :local(.text-brand-light),
.text-brand-light-hover:hover, :local(.text-brand-light-hover):hover {
    color: var(--brand-light-color);
}

.bg-brand,
.bg-brand-hover:hover,
.bg-brand-active:active { background-color: var(--brand-color); }


/* success */

.text-success { color: var(--success-color); }
.bg-success { background-color: var(--success-color); }

/* error */

.text-error, :local(.text-error),
.text-error-hover:hover {
  color: var(--error-color);
}

.bg-error,
.bg-error-hover:hover {
  background-color: var(--error-color);
}
.bg-error-input {
  background-color: #FCE8E8
}

/* heads up */

.text-headsup {
  color: var(--headsup-color);
}

.bg-headsup {
  background-color: var(--headsup-color);
}

/* warning */

.text-warning {
  color: var(--warning-color) !important;
}

.bg-warning {
  background-color: var(--warning-color);
}

/* favorite */
.text-gold,
.text-gold-hover:hover {
    color: var(--gold-color);
}

.text-purple,
.text-purple-hover:hover {
    color: var(--purple-color);
}

.text-purple-light,
.text-purple-light-hover:hover {
    color: var(--purple-light-color);
}

.text-green,
.text-green-hover:hover {
    color: var(--green-color);
}

.text-orange {
    color: var(--orange-color);
}

.text-slate { color: var(--slate-color); }
.text-slate-light { color: var(--slate-light-color); }
.text-slate-extra-light { background-color: var(--slate-extra-light-color); }

.bg-gold { background-color: var(--gold-color); }
.bg-purple { background-color: var(--purple-color); }
.bg-purple-light { background-color: var(--purple-light-color); }
.bg-green { background-color: var(--green-color); }

/* alt */
.bg-alt, .bg-alt-hover:hover { background-color: var(--alt-color); }

/* grey */
.text-grey-1, :local(.text-grey-1),
.text-grey-1-hover:hover { color: var(--grey-1) }

.text-grey-2, :local(.text-grey-2),
.text-grey-2-hover:hover { color: var(--grey-2) }

.text-grey-3, :local(.text-grey-3),
.text-grey-3-hover:hover { color: var(--grey-3) }

.text-grey-4,
.text-grey-4-hover:hover { color: var(--grey-4) }

.text-grey-5,
.text-grey-5-hover:hover { color: var(--grey-5) }

.bg-grey-0,
.bg-grey-0-hover:hover { background-color: var(--base-grey) }
.bg-grey-1 { background-color: var(--grey-1) }
.bg-grey-2 { background-color: var(--grey-2) }
.bg-grey-3 { background-color: var(--grey-3) }
.bg-grey-4 { background-color: var(--grey-4) }
.bg-grey-5 { background-color: var(--grey-5) }

.bg-slate { background-color: var(--slate-color); }
.bg-slate-light { background-color: var(--slate-light-color); }
.bg-slate-extra-light { background-color: var(--slate-extra-light-color); }

.text-dark, :local(.text-dark) {
    color: var(--dark-color);
}

/* white  - move to bottom for specificity since its often used on hovers, etc */
.text-white, :local(.text-white),
.text-white-hover:hover { color: #fff; }

/* common pattern, background brand, text white when hovering or selected */
.brand-hover:hover {
    color: #fff;
    background-color: var(--brand-color);
}
.brand-hover:hover * {
    color: #fff;
}

.bg-white, :local(.bg-white) { background-color: #fff; }

.bg-light-blue { background-color: #F5FAFC; }

.bg-light-blue-hover:hover {
  background-color: #E4F0FA;
}

.text-light-blue,
.text-light-blue-hover:hover {
  color: #CFE4F5
}
.text-slate { color: #606E7B; }

.bg-transparent { background-color: transparent }
